import React, { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import cn from 'classnames'
import { AtActivityIndicator, AtCard, AtTag } from 'taro-ui'
import { request } from '../../utils/request'
import { useRequest } from 'ahooks'
import styles from './index.module.less'

const getScoreFunc = () => {
  return request('get', '/app/baiyejifen', {})
}
const getAddChanglogFunc = () => {
  return request('get', '/app/addScoreRecord', {})
}
const BaiyeScore: React.FC<{}> = () => {
  const [data, setData] = useState()
  const [addScoreRecord, setAddScoreRecord] = useState([])
  const getScore = useRequest(getScoreFunc, {
    manual: true,
    onSuccess: d => {
      // @ts-ignore
      setData(d)
    }
  })
  const getAddChanglog = useRequest(getAddChanglogFunc, {
    manual: true,
    onSuccess: d => {
      // @ts-ignore
      setAddScoreRecord(d)
    }
  })
  useEffect(() => {
    getScore.run()
    getAddChanglog.run()
  }, [])
  return (
    <View className={styles.baiyejifen}>
      {data ?
        <>

          <View className='at-row  at-row__justify--center'>
            {/* @ts-ignore */}
            <View className={cn('at-col at-col-5', styles.score, data.boxue > 10 ? styles.scoreBackHege : styles.scoreBackNotHege)}>
              {/* @ts-ignore */}
              <View className={styles.fenshu}>{data.boxue}</View>
              <View className={styles.title}>博学</View>
            </View>{/* @ts-ignore */}
            <View className={cn('at-col at-col-5', styles.score, data.duxing > 10 ? styles.scoreBackHege : styles.scoreBackNotHege)}>
              {/* @ts-ignore */}
              <View className={styles.fenshu}>{data.duxing}</View>
              <View className={styles.title}>笃行</View>
            </View>
          </View>
          <View className='at-row  at-row__justify--center'>
            {/* @ts-ignore */}
            <View className={cn('at-col at-col-5', styles.score, data.jingmei > 30 ? styles.scoreBackHege : styles.scoreBackNotHege)}>
              {/* @ts-ignore */}
              <View className={styles.fenshu}>{data.jingmei}</View>
              <View className={styles.title}>尽美</View>
            </View>
            {/* @ts-ignore */}
            <View className={cn('at-col at-col-5', styles.score, data.mingde > 10 ? styles.scoreBackHege : styles.scoreBackNotHege)}>
              {/* @ts-ignore */}
              <View className={styles.fenshu}>{data.mingde}</View>
              <View className={styles.title}>明德</View>
            </View>
          </View>
          <View className='at-row  at-row__justify--center'>
            <View className={cn('at-col at-col-10')}>
              {/* @ts-ignore */}
              <View className={styles.totalScore}>综合得分：{data.boxue + data.duxing + data.jingmei + data.mingde} {data.qualifiedValue}</View>
            </View>
          </View>
          <View className={styles.addChangeLog}>
            <View className={styles.logTitle}>
              <View className={styles.icon}></View>
              <View className={styles.title}>加分记录</View>
            </View>
            {
              addScoreRecord.map(item => {
                return <AtCard
                  // @ts-ignore
                  extra={item.score + '分'}
                  // @ts-ignore
                  title={item.activityName}
                >
                  {/* @ts-ignore */}
                  <View className={styles.times}>{item.startTime} ~ {item.endTime}</View>
                  {/* @ts-ignore */}
                  <View>{item.activityBlockName && <AtTag size='small' active type='primary' circle>{item.activityBlockName}</AtTag>}
                    {/* @ts-ignore */}
                    {item.complete && <AtTag size='small' type='primary' active circle>{item.complete}</AtTag>}</View>
                </AtCard>
              })
            }
          </View>
        </>
        : <View className={styles.loading}> <AtActivityIndicator color='#13CE66' size={50} content='加载中...' mode='center'></AtActivityIndicator>
        </View>}

    </View>
  )
}

export default BaiyeScore